import React from "react";
import {Carousel, WingBlank} from 'antd-mobile';
import {Flex, Grid} from 'antd-mobile';
import axios from 'axios'


import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'

import './index.scss'

import {API} from '../../utils/api'
import {BASE_URL} from '../../utils/url'

// 导入 utils 中获取当前定位城市的方法
import {getCurrentCity} from '../../utils'
import styles from "../HouseList/index.module.css";
import SearchHeader from "../../components/SearchHeader";

// 导航菜单的数据
const navs = [{
    id: 0,
    img: nav1,
    title: '整租',
    path: '/home/list'
}, {
    id: 1,
    img: nav2,
    title: '合租',
    path: '/home/list'
}, {
    id: 2,
    img: nav3,
    title: '地图找房',
    path: '/home/map'
}, {
    id: 3,
    img: nav4,
    title: '去出租',
    path: '/home/list'
}]

export default class News extends React.Component {

    state = {
        // 轮播图状态
        swipers: [],
        isSwiperLoaded: false,
        groups: [],
        news: [],
        // 当前城市名称
        curCityName: '贵阳'
    }

    renderNavs() {
        return navs.map(item => {
            return (
                <Flex.Item key={item.id} onClick={() => {
                    this.props.history.push(item.path)
                }}>
                    <img src={item.img} alt=""/>
                    <h2>{item.title}</h2>
                </Flex.Item>
            )
        })
    }

    async getSwipers() {
        // 请求数据
        let {data: res} = await API.get('/home/swiper')
        // 判断返回的状态是否是成功
        if (res.status != 200) {
            console.error(res.description)
            return
        }
        // 把获取到的值设置给state
        this.setState({
            swipers: res.body,
            isSwiperLoaded: true
        })
    }

    async getGroups() {
        let {data: res} = await API.get('/home/groups', {
            params: {
                'area': 'AREA%7C88cff55c-aaa4-e2e0'
            }
        })
        // 判断返回的状态是否是成功
        if (res.status != 200) {
            console.error(res.description)
            return
        }
        // 把获取到的值设置给state
        this.setState({
            groups: res.body
        })
    }

    async getNews() {
        let {data: res} = await API.get('/home/news?area=AREA%7C88cff55c-aaa4-e2e0')
        // 判断返回的状态是否是成功
        if (res.status != 200) {
            console.error(res.description)
            return
        }
        console.log(res)
        // 把获取到的值设置给state
        this.setState({
            news: res.body
        })
    }

    async componentDidMount() {
        // 调用请求轮播图的方法
        this.getSwipers()
        this.getGroups()
        this.getNews()

        // 2 通过 IP 定位获取到当前城市名称。
        /*const curCity = new window.BMap.LocalCity()
        curCity.get(async res => {
            // console.log('当前城市信息：', res)
            const result = await axios.get(
                `http://39.108.180.237:8081/area/info?name=${res.name}`
            )
            // console.log(result)
            this.setState({
                curCityName: result.data.body.label
            })
        })*/
        const curCity = await getCurrentCity()
        this.setState({
            curCityName: curCity.label
        })
    }

    // 渲染轮播图的逻辑代码
    renderSwipers() {
        return this.state.swipers.map(item => (
            <a
                key={item.id}
                href="http://www.itcast.cn"
                style={{display: 'inline-block', width: '100%', height: 212}}
            >
                <img
                    src={BASE_URL+item.imgSrc}
                    alt=""
                    style={{width: '100%', verticalAlign: 'top'}}
                />
            </a>
        ))
    }

    renderGroups(item) {
        return (
            <Flex className="group-item" justify="around">
                <div className="desc">
                    <p className="title">{item.title}</p>
                    <span className="info">{item.desc}</span>
                </div>
                <img src={BASE_URL+item.imgSrc} alt=""/>
            </Flex>
        )
    }

    renderNews() {
        return this.state.news.map(item => {
            return (
                <div className="news-item" key={item.id}>
                    <div className="imgwrap">
                        <img
                            className="img"
                            src={BASE_URL+item.imgSrc}
                            alt=""
                        />
                    </div>
                    <Flex className="content" direction="column" justify="between">
                        <h3 className="title">{item.title}</h3>
                        <Flex className="info" justify="between">
                            <span>{item.from}</span>
                            <span>{item.date}</span>
                        </Flex>
                    </Flex>
                </div>
            )
        })
    }

    render() {
        return (
            <div className="index">
                <div className="swiper">
                    {/* 轮播图 */}
                    {this.state.isSwiperLoaded ? (<Carousel
                        autoplay={true}
                        infinite
                        autoplayInterval='2000'
                    >
                        {/* 调用渲染轮播图的方法 */}
                        {this.renderSwipers()}
                    </Carousel>) : ('')}
                    {/* 搜索框 */}

                    <SearchHeader cityName={this.state.curCityName}  />
                </div>

                {/* 导航栏 */}
                <Flex className="nav">
                    {this.renderNavs()}
                </Flex>

                <div className="group">
                    <h3 className="group-title">
                        租房小组 <span className="more">更多</span>
                    </h3>
                    <Grid data={this.state.groups}
                        /* 列数 */
                          columnNum={2}
                        /* 是否强制正方形 */
                          square={false}
                        /* 是否有边框 */
                          hasLine={false}
                        /* 自定义里面的布局 */
                          renderItem={item => this.renderGroups(item)}/>
                </div>

                {/* 最新资讯 */}
                <div className="news">
                    <h3 className="group-title">最新资讯</h3>
                    <WingBlank size="md">{this.renderNews()}</WingBlank>
                </div>

            </div>
        )
    }

}
